<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<view class="team-item" @click="toTeamDetails">
		<view class="team-head flex-row-center">
			<view class="team-user flex-row-center">
				<template>
					<image v-if="groupInfo.avatar" :src="groupInfo.avatar" class="ava" mode="aspectFill"></image>
					<up-avatar size="68rpx" v-else :text="groupInfo.fristName" fontSize="32rpx"
						randomBgColor></up-avatar>
				</template>
				<text class="user-name">{{groupInfo.nickname}}</text>
				<!-- 等级 -->
				<view class="lv-box flex-row-center">
					<image :src="teamInfo.vip_icon" class="lv-bg" mode=""></image>
					<text class="lv">{{teamInfo.vip_name}}</text>
				</view>
				<template>
			<!-- 		<view class="follow flex-center" v-if="true">
						<text class="text">关注</text>
					</view>
					<view class="followed flex-center" v-else>
						<text class="text">已关注</text>
					</view> -->
				</template>
			</view>
			<!--  -->
			<view class="head-right flex-row-center">
				<!-- 			<template>
					<up-icon name="thumb-up-fill" color="#89DEB9" size="30rpx"></up-icon>
					<up-icon name="thumb-up" color="#93AAA1" size="30rpx"></up-icon>
				</template> -->
				<view style="margin-left: 40rpx;">
					<up-icon name="chat" color="#93AAA1" size="30rpx"></up-icon>
				</view>
			</view>
		</view>
		<!-- 内容 -->
		<view class="item-content flex">
			<image :src="groupInfo.imageList[0]" class="item-img" mode="aspectFill"></image>
			<view class="item-details flex">
				<!-- 座位情况 -->
				<text class="seat">座位情况：{{groupInfo.join_number}}/{{groupInfo.number_people}}</text>
				<!-- 倒计时 -->
				<view class="countdown-box flex-row-center">
					<up-icon name="clock" color="#93AAA1" size="24rpx"></up-icon>
					<view class="time-box flex-row-center">
						<template v-if="groupInfo.countDownInfo.status!=-1&&groupInfo.countDownInfo">
							<text class="text">倒计时</text>
							<text class="time">{{groupInfo.countDownInfo.day}}</text>
							<text class="text">天</text>
							<text class="time">{{groupInfo.countDownInfo.hour}}</text>
							<text class="text">时</text>
							<text class="time">{{groupInfo.countDownInfo.minute}}</text>
							<text class="text">分</text>
						</template>
						<text v-else class="text">组队中</text>
					</view>
				</view>
				<!-- 详情 -->
				<view class="details-info flex-row-center">
					<view class="details-item flex-row-center">
						<up-icon name="question-circle" color="#93AAA1" size="24rpx"></up-icon>
						<text class="question-text">详情须知</text>
					</view>
					<!-- 分隔 -->
					<text class="separation"></text>
					<view class="details-item flex-row-center">
						<up-icon name="map-fill" color="#626466" size="24rpx"></up-icon>
						<text class="text">{{groupInfo.juli}}km</text>
					</view>
				</view>
				<!-- 按钮 -->
				<template>
					<view class="item-border-active item-btn flex-center" v-if="true">
						<view class="btn-left ">
							<text class="icon">￥</text>
							<text class="price">{{groupInfo.cost}}</text>
							<text class="unit">/人</text>
						</view>
						<view class="btn-right flex-center">
							<text class="text">立即组队</text>
						</view>
					</view>
					<!-- 未开始 -->
					<view class="item-border-noActive item-btn flex-center" v-else>
						<view class="btn-left ">
							<text class="icon">￥</text>
							<text class="price">{{groupInfo.cost}}</text>
							<text class="unit">/人</text>
						</view>
						<view class="btn-right-noStart flex-center">
							<text class="text">未开始</text>
						</view>
					</view>
				</template>
			</view>
		</view>
		<!-- 更多user -->
		<view class="more-user flex-center">
			<!-- <up-avatar-group :urls="urls" size="44rpx" gap="0.4"></up-avatar-group> -->
			<text class="text">查看更多</text>
			<up-icon name="arrow-right" color="rgba(255,255,255,0.87)" size="12"></up-icon>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		teamInfo: {
			default: {}
		}
	});
	const groupInfo = ref(computed(() => props.teamInfo));
	const urls = reactive([
		'https://uview-plus.jiangruyi.com/uview-plus/album/1.jpg',
		'https://uview-plus.jiangruyi.com/uview-plus/album/2.jpg',
	]);
	const toTeamDetails = () => {
		uni.navigateTo({
			url: '/page_main/views/teamDetails?id=' + groupInfo.value.t_id
		})
	}
</script>

<style scoped lang="scss">
	.team-item {
		box-sizing: border-box;
		padding: 32rpx 20rpx;
		width: 100%;
		min-height: 350rpx;
		// background: #0E0F0F;
		background: $teamItem-bg-color;
		border-radius: 20rpx;
		margin-bottom: 16rpx;
	}

	.team-head {
		justify-content: space-between;

		.team-user {
			.ava {
				width: 68rpx;
				height: 68rpx;
				border-radius: 50%;
			}

			.user-name {
				font-weight: bold;
				font-size: 34rpx;
				// color: rgba(255, 255, 255, 1);
				color: $name-color;
				margin: 0 4rpx 0 16rpx;
				max-width: 200rpx;
				text-overflow: ellipsis;
				white-space: nowrap;
				lines: 1;
				overflow: hidden;
			}

			.lv-box {
				position: relative;
				margin-right: 24rpx;
				justify-content: flex-end;

				.lv-bg {
					width: 44rpx;
					height: 38rpx;
					margin-right: 4rpx;
				}

				.lv {
					font-weight: bold;
					font-size: 20rpx;
					color: #DD9E4F;
				}
			}

			.follow {
				width: 96rpx;
				height: 48rpx;
				// border: 2rpx solid #A2DEA3;
				border: 2rpx solid $attention-color;
				// border-image: linear-gradient(180deg, rgba(136, 207, 181, 1), rgba(137, 207, 136, 1)) 2 2;
				border-radius: 12rpx;

				.text {
					font-weight: bold;
					font-size: 28rpx;
					// color: #A2DEA3;
					color: $attention-color;
				}
			}

			.followed {
				width: 124rpx;
				height: 48rpx;
				border-radius: 12rpx;
				// border: 2rpx solid #4D4D4D;
				border: 2rpx solid $unAttention-color;

				.text {
					font-weight: bold;
					font-size: 28rpx;
					color: $attention-color;
				}
			}
		}
	}

	.item-content {
		margin-top: 22rpx;
		padding-bottom: 24rpx;
		border-bottom: 2rpx solid rgba(255, 255, 255, 0.1);

		.item-img {
			width: 226rpx;
			height: 226rpx;
			background: #D9D9D9;
			border-radius: 16rpx;
			flex-shrink: 0;
		}

		.item-details {
			flex: 1;
			margin-left: 34rpx;
			flex-direction: column;
			justify-content: space-between;

			.seat {
				font-weight: 800;
				font-size: 30rpx;
				// color: #E4E4E5;
				color: $name-color;
			}

			.countdown-box {
				.time-box {
					margin-left: 6rpx;
				}

				.text {
					font-weight: 500;
					font-size: 24rpx;
					// color: #ACADAE;
					color: $description-color;
				}

				.time {
					font-weight: 500;
					font-size: 24rpx;
					// color: #B2FFD0;
					color: $timer-color;
					margin: 0 6rpx;
				}
			}

			.details-info {
				.separation {
					margin: 0 16rpx;
					display: block;
					width: 1rpx;
					height: 60%;
					background-color: #94B2A7;
				}

				.details-item {
					.text {
						font-weight: 400;
						font-size: 24rpx;
						// color: #94B2A7;
						// color: #626466;
						color: $distance-color;
						margin-left: 6rpx;
					}

					.question-text {
						font-weight: 400;
						font-size: 24rpx;
						color: #94B2A7;
						margin-left: 6rpx;
					}
				}
			}

			.item-border-noActive {
				border: 3rpx solid #4A5C58;

			}

			.item-border-active {
				border: 3rpx solid #7EDE9E;
			}

			.item-btn {
				width: 100%;
				height: 70rpx;
				border-radius: 100rpx;
				box-sizing: border-box;

				.btn-left {
					flex: 1;
					// color: #8BFFF3;
					color: $price-color;
					font-weight: bold;
					text-align: center;
					box-sizing: border-box;
					height: 100%;
					border-radius: 35rpx 0 35rpx 35rpx;
					position: relative;
					z-index: 9;
					background-color: #0E0F0F;

					.icon {
						font-size: 32rpx;
						margin-right: 8rpx;
					}

					.price {
						font-size: 48rpx;
					}

					.unit {
						font-size: 16rpx;
					}
				}

				.btn-right {
					width: 172rpx;
					height: 70rpx;
					border-radius: 35rpx 35rpx 35rpx 0rpx;
					background: $btn-bg-color;
					position: relative;

					&::before {
						content: '';
						width: 35rpx;
						height: 35rpx;
						background-color: #5FD1C1;
						position: absolute;
						bottom: 0;
						left: -32rpx;
						z-index: 1;
					}

					.text {
						font-weight: bold;
						font-size: 28rpx;
						color: $btn-text-color;
					}
				}

				.btn-right-noStart {
					width: 172rpx;
					height: 70rpx;
					background: $no-active-color;
					border-radius: 35rpx 35rpx 35rpx 0rpx;
					position: relative;

					&::before {
						content: '';
						width: 35rpx;
						height: 35rpx;
						background: $no-active-color;
						position: absolute;
						bottom: 0;
						left: -32rpx;
						z-index: 1;
					}

					.text {
						font-weight: bold;
						font-size: 28rpx;
						color: $noActive-text-color;
					}
				}
			}

		}
	}

	.more-user {
		margin-top: 20rpx;

		.text {
			font-weight: 500;
			font-size: 24rpx;
			color: #ACADAE;
			margin: 0 2rpx 0 8rpx;
		}
	}
</style>